/* ui元素定义--------------------------------------------------------------------------- 
*/

/* 表单
	-------------------------*/
/* input 输入框 */

.txt_input(@color:#333, @bg:#FBFBFB, @border_width:1px, @border_style:solid, @border_color:#A8A8A8 #D8D8D8 #D8D8D8 #A8A8A8){
	color:@color;
	background:@bg;
	border-width:@border_width;
	border-style:@border_style;
	border-color:@border_color;
}
/* 示例
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
input[type=search],
input[type=date]{ 
	.txt_input();
	&:focus{
		.txt_input(#000,#fff,1px,solid,#ccc);
	}
	&:disabled,&[disabled]{
		.txt_input(#666,#eee,1px,solid,#ccc);
	}
}*/
/* 单选、多选 */
input[type=radio],input[type=checkbox],input[type=file]{
	vertical-align:middle;
}
/* 文件上传 */
.file{}
/* button submit 按钮 */
.button(@color:#3C3C3D,@bg:#F6F6F6,@border_width:1px, @border_style:solid, @border_color:#cacaca #cacaca #bbb){
	color: @color;
	background:@bg;
	border-width:@border_width;
	border-style:@border_style;
	border-color:@border_color;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline:none;
	-moz-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	&::-moz-focus-inner{ border:0; }
}
/* 示例
input[type="button"],
button[type="button"],
input[type="reset"],
button[type="reset"]{
	.button();text-align: center; text-decoration: none; .border-radius(4px); 
	&:hover{
		.button(white,#75A9E2,1px,solid,#388AD4);
		.box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29));
		.text-shadow(0 1px 0 rgba(0,0,0,.3));
		#gradient > .vertical(#75A9E2,#4C83BF); //使用该样式必须先声明@disable-filters的布尔值
	}
	&:active{
		border-color: #20559a;
		.box-shadow(inset 0 0 7px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,1));
	}
	&:disabled,&.disabled{
		.button(#888,#E9E9E9,1px,solid,#ccc #ccc #bbb);
		.text-shadow(0 -1px 0 rgba(255,255,255,.3)); 
		#gradient > .vertical(#E9E9E9,#D1D1D1);
	}
}

input[type="submit"],
button[type="submit"]{
	.button(white,#0090D2,1px,solid,#4081af #4081af #20559a);
	.text-shadow(0 -1px 0 rgba(0,0,0,.3)); 
	.border-radius(4px); 
	#gradient > .vertical(#52a8e8,#2e76cf);
	.box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29));
	text-align: center; 
	text-decoration: none; 
	&:hover{
		#gradient > .vertical(#3e9ee5,#1666ca);
	}
	&:active{
		border-color: #20559a;
		.box-shadow(inset0 0 7px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,1));
	}
}*/
.select(@color:#3C3C3D,@bg:#FBFBFB,@border_width:1px, @border_style:solid, @border_color:#D8D8D8){
	color: @color;
	background:@bg;
	border-width:@border_width;
	border-style:@border_style;
	border-color:@border_color;
	vertical-align:middle; 
	display:inline-block;
	white-space:nowrap;
}

/* 表单行 */
.form_row{
	.clearfix;
	vertical-align:top;
	/* 表单标签 */
	.form_label{
		display:inline-block;
	}
	img{vertical-align: middle;}
	/*  输入框右边的字段 */
	.right_tip{
		display:inline-block;
		vertical-align: middle;
	}

}
/* 浮动行 */
.float_row{
	.clearfix;
	.form_label{ display: inline; float: left;}
}
/* 表单分割线 */
.form_line{
	.clearfix;
	font-size:100%;
	height:1px;
	overflow:hidden;
	border-bottom-width:1px;
	border-style:solid;
	hr{
		border:none;
	}
}
/* 表单底部 */
.form_footer{
	.clearfix;
}
/* 带图标表单提示共3种 */
.form_tip{
	.clearfix;
	 &.success{
		.icon{.size(48px);background:url(../img/succeed.png) no-repeat;}
	}
	&.error{
		.icon{.size(48px); background:url(../img/error.png) no-repeat;}
	}
	&.info{
		.icon{.size(48px); background:url(../img/warning.png) no-repeat;}
	}
}



/* 星星 
	-------------------------*/
.stars{
	display: inline-block;
	.size(16px);
	content:"";
	line-height:16px;
	background: url(../images/star.gif) repeat-x ;
	overflow: hidden;
	vertical-align: text-bottom;
	.star_selected{
		display: inline-block;
		.size(16px);
		background: url(../images/star.gif) repeat-x left -32px;
	}
	&.sred{
		.star_selected{background-position: left -16px;}
	}

	&.a3{width:48px;}
	&.a5{width:80px;}
	&.a8{width:128px;}
	&.a10{width:160px;}
	&.s0{
		.star_selected{width:0;}
	}
	&.s0d5{
		.star_selected{width:8px;}
	}
	&.s1d5{
		.star_selected{width:24px;}
	}
	&.s2{
		.star_selected{width:32px;}
	}
	&.s2d5{
		.star_selected{width:40px;}
	}
	&.s3{
		.star_selected{width:48px;}
	}
	&.s3d5{
		.star_selected{width:56px;}
	}
	&.s4{
		.star_selected{width:64px;}
	}
	&.s4d5{
		.star_selected{width:72px;}
	}
	&.s5{
		.star_selected{width:80px;}
	}
	&.s5d5{
		.star_selected{width:88px;}
	}
	&.s6{
		.star_selected{width:96px;}
	}
	&.s6d5{
		.star_selected{width:104px;}
	}
	&.s7{
		.star_selected{width:112px;}
	}
	&.s7d5{
		.star_selected{width:120px;}
	}
	&.s8{
		.star_selected{width:128px;}
	}
	&.s8d5{
		.star_selected{width:136px;}
	}
	&.s9{
		.star_selected{width:144px;}
	}
	&.s9d5{
		.star_selected{width:152px;}
	}
	&.sall{
		.star_selected{width:100%;}
	}
}


	
	/* 选卡 
		-----------------------------*/
		.tab{ 
			position:relative; z-index:1; top:1px;

			a{ 
				display:inline-block;  
				padding-left:10px; 
				padding-right:10px;
				border:1px solid #D9D9D9;
				border-bottom-color:#ccc; background:#F3F3F3; color:#666;

				.arrow{ 
					border-color:#999 #F3F3F3 #F3F3F3;
					border-width:4px;
					border-style:solid ;
					display:inline-block; 
					width:0; 
					height:0; 
					font-size:0; 
					line-height:0; 
					vertical-align:middle; 
					margin-left:5px;
					display: none;
				}
				&:hover{ 
					background:#fff;
					text-decoration:none;
					.arrow{

						border-color:#fff; border-top-color:#666;
					}
				}

				&.selected{
					font-weight:bold; background:#fff; border:1px solid #ccc; border-bottom:none; padding-bottom:1px; color:#2F549F;
					.arrow{
						display: inline-block;
						border-color:#fff; border-top-color:#2F549F;
					}

				}
			}
			
		}


	/* 选卡内容
	------------------------------------------*/	
		.tab_detail{ 
			background:#fff;
			border:1px solid #ccc;
			padding:10px;
		}


	/* 列表 
	------------------------------------------*/
		.list{ 
			border:1px solid #ccc;
			dt{ 
				text-align:center; font-weight:bold; background:#71829E; color:#fff; line-height:30px;
			}
			dd{ 
				clear:both; padding:10px; height:25px;

				.tags{ 
					height:25px; padding:0 10px; background:#f4f4f4; line-height:25px; color:#666;
				}

				li{
					display:inline; float:left; width:10%; text-align:center;
					&.w1{ width:100%; white-space:nowrap; overflow:hidden;}
					&.w2{ width:20%; white-space:nowrap; overflow:hidden;}
					&.w3{ width:30%; white-space:nowrap; overflow:hidden;}
					&.w4{ width:40%; white-space:nowrap; overflow:hidden;}
					&.w5{ width:50%; white-space:nowrap; overflow:hidden;}
					&.w6{ width:60%; white-space:nowrap; overflow:hidden;}
					&.w7{ width:70%; white-space:nowrap; overflow:hidden;}
					&.w8{ width:80%; white-space:nowrap; overflow:hidden;}
					&.w9{ width:90%; white-space:nowrap; overflow:hidden;}
				}
				&.odd{
					background:#fff;
				}
			}
		}

	/* 翻页 
	-------------------------------------------*/
		.page{
					padding:5px 10px;

		    p 	  { margin:0;}
		    .stats{ border:1px solid #A1A1A1;}

		    a,span{ display:inline-block; }
			a     {
			    	&:hover 				   { color:#2971a7;}
			    	&.selected,&.selected:hover{ background:#A1A1A1; color:#fff; text-decoration:none;}
			    }
		}

	/* album_list 相册
	----------------------------------------------------*/
		.albums{
			&.ab_col2{
				.album_item{
					width:50%;overflow:visible;
					.ab_fream { height:350px;}
				}
			}
			&.ab_col3{
				.album_item{
					width:33.33%;overflow:visible;
					.ab_fream{height:300px;}
				}
			}
			&.ab_col4{
				.album_item{
					width:25%;overflow:visible;
					.ab_fream{height:200px;}
				}
			}

			&.ab_col5{
				.album_item{
					width:20%;overflow:visible;
					.ab_fream{height:180px;}
				}
			}

			.album_item{
				display:inline;
				float:left;
				width:100%;
				height:100%;
				overflow:hidden;
				position:relative;
				z-index:1;
				padding-top:60px;
				cursor:pointer;
			    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(rgba(255,255,255,0)));
			    background-image: -webkit-linear-gradient(top, #eaeaea, rgba(255,255,255,0));
			    background-image:    -moz-linear-gradient(top, #eaeaea, rgba(255,255,255,0));
			    background-image:      -o-linear-gradient(top, #eaeaea, rgba(255,255,255,0));
			    background-image:         linear-gradient(to bottom, #eaeaea, rgba(255,255,255,0));
			    filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99eaeaea,endColorstr=#00ffffff)'; 
            		zoom: 1;
				.ab_title{ 
					font:bold 12px/25px "Hiragino Sans GB", "Microsoft Yahei","微软雅黑", sans-serif;
					text-align:center;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color:#000;
					position:relative;
					z-index:2;
				}
				.ab_fream{
					width:100%;height:400px;
					
					ul{
						position: relative;
						z-index:1;
						width:100%;
						height:100%;

						li{
							position: absolute;
							z-index:1;
							width:100%;
							height:100%;
							display: table-cell;
	    					vertical-align:middle;
							text-align:center;
							-webkit-transition: all 0.3s ease-out; 
							     -moz-transition: all 0.3s ease-out; 
							       -o-transition: all 0.3s ease-out; 
							          transition: all 0.3s ease-out;
							img{
								box-shadow:1px 1px 5px rgba(0,0,0,.4);
								border: 3px solid #fff;
								max-width:70%;
								max-height:80%;
								vertical-align:middle;
							}

							&:nth-child(1){
								top:0;
								left:0;
								z-index:6;
							}
							&:nth-child(2){
								top:5px;
								left:0;
								z-index:5;
								img{
									-webkit-transform: rotate(-10deg); 
								     -moz-transform: rotate(-10deg); 
								      -ms-transform: rotate(-10deg); 
								       -o-transform: rotate(-10deg); 
								          transform: rotate(-10deg);
								}
 
							}
							&:nth-child(3){
								top:10px;
								left:0;
								z-index:4;
								img{
									-webkit-transform: rotate(10deg); 
								     -moz-transform: rotate(10deg); 
								      -ms-transform: rotate(10deg); 
								       -o-transform: rotate(10deg); 
								          transform: rotate(10deg);
								}
							}
							&:nth-child(4){
								top:15px;
								left:0;
								z-index:3;
								img{
									-webkit-transform: rotate(-25deg); 
								     -moz-transform: rotate(-25deg); 
								      -ms-transform: rotate(-25deg); 
								       -o-transform: rotate(-25deg); 
								          transform: rotate(-25deg);
								}
							}

							
						}
					}

				}

				.ab_info{
						padding-bottom:10px;
						.ab_time{
							display:inline-block;
							float:left;
							margin-left:10px;
						}
						.ab_count{
							float:right;
							margin-right:10px;
						}
						.ab_des{
							clear:both;
							margin-left:10px;
							margin-right:10px;
							line-height:18px;
							max-height:36px;
							overflow:hidden;
						}
					}

				&:hover{
					z-index:2;
					background:#666;
						.ab_title{
							color:#fff;
							text-shadow:0 -1px 0 #000;
							background:#555;
							background:rgba(0,0,0,.2);
						}
						.ab_fream{
							ul {
								li{

									&:nth-child(1){
										top:50px;left:0;
									}
									&:nth-child(2){
										top:-40px;
									}
									&:nth-child(3){
										left:10%;text-align:right;									
									}
									&:nth-child(4){
										left:-10%;text-align:left;								
									}
								}
							}
						}
						.ab_info{
							background:#555;
							background:rgba(0,0,0,.2);
							color:#fff;z-index:2;
							text-shadow:1px 1px 0 rgba(0,0,0,.5);
						}
						
					}
			}
		}

		/* 导航
	----------------------------------------------------*/

	 .nav{
	 	font-size:14px; color:#fff; min-height:30px; width:100%;

	 	.menu{position:relative; z-index:2;}

	 	.operate{ 
	 		bottom:3px;
	 		a{ color:#fff; white-space:nowrap;}
	 		.icon16{ float:none;}
	 	}
	 	li{ 
	 		float:left;  position:relative; z-index:1; 

	 		a{
	 			color:#fff;display:inline-block;  font:14px/28px Arial, Helvetica, sans-serif; text-align:center; -o-transition: all 0.2s ease-out 0.1s; -webkit-transition: all 0.2s ease-out 0.1s; -moz-transition: all 0.2s ease-out 0.1s; -ms-transition: all 0.2s ease-out 0.1s; transition: all 0.2s ease-out 0.1s;
	 			&:hover{position:relative; }
	 			&:active{box-shadow:inset 0 5px 5px rgba(0,0,0,0.5); }
	 			&.selected,&.selected:hover, &.selected:visited{position:relative; z-index:1; }
	 		}
	 		a span.new{ position:absolute; width:25px; height:14px; top:-12px; right:0; background:url(../img/system/new.gif) no-repeat right top;}

	 		ul{
	 			.po_ab;
	 			.hidden;
	 			li{
	 				float: none;
	 				position: static;
	 			}
	 		}

	 		&:hover{
	 			ul{
	 				.block;
	 				left:0;
	 				top:30px;
	 			}
	 		}

	 	}

	 }
 #ie6  .nav {height: ~'expression( this.scrollHeight < 30 ? "30px" : "auto" )'; }
		#ie6  .nav .operate{  bottom:auto; top:2px;}
		#ie6  .nav .operate a{ width:50px;}	

		.primary_nav{border:1px solid #ccc; border-radius:10px;
  					background-color: #f5f5f5;
					ul li{ 
						display:inline; 
						float:left; 
						text-align:center; 
						

							.icon32{ 
								display:block; 
								margin:5px auto; 
								float:none; 
							}
							em{ 
							   font-style:normal;
							}
							a{
							 display:inline-block;
							  
							   color:#333; 
							   position:relative; 
							   padding:0 10px; 
							   margin:10px 5px; 
							   border:1px solid #f5f5f5;
							   border-radius:5px;
							   -o-transition: all 0.2s;
							   -webkit-transition: all 0.2s;
							   -moz-transition: all 0.2s;
							   -ms-transition: all 0.2s;
							   transition: all 0.2s;
							   .badge{
							   		  position:absolute; 
							   		  top:0; 
							   		  right:0; 
							   		  background:#c00; 
							   		  font:10px/15px Verdana, Geneva, sans-serif, sans-serif; 
							   		  color:#fff; 
							   		  display:inline-block; 
							   		  padding:0 3px; 
							   		  font-weight:bold; 
							   		  border-radius:10px; 
							   		  box-shadow:0 2px 0 rgba(0,0,0,.2);
							   		}
							   &:hover{ 
							   	background:#fff;
							   	border-color:#ccc; 
							   	box-shadow:0 0 10px rgba(0, 0, 0,.2);
							   	text-decoration:none;
							   	}
							   	&.selected{
							   	background:#fff;
							   	color:#000; 
							   	border-color:#ccc;
							   	}
							   	&:active{box-shadow:inset 0 0 10px rgba(0, 0, 0,.5);	}
							   	&.selected:hover{
							   	background:#fff;

							   	}
							}
						}
					}

		/* 页面副导航 */
		.minor_nav ul{
			&.nav_group{ 
				background:#f8f8f8; 
				border:1px solid #d9d9d9; 
				margin-bottom:10px;
				border-radius:5px;
				
				li{ 
			  		display:inline;
				  a{ 
				     display:block; 
				  	 padding:5px 10px;  
				  	 background:#efefef; 
				  	 color:#666; 
				  	 position:relative; 
				  	 z-index:2; 
				  	 line-height:16px; 
				  	 overflow:hidden;
				  	 border:1px solid #efefef;

				  	strong{
				  		color:#666; 
				  		   font-weight:normal;
				  		}
				  	&.selected{ 
	 					background:#fff; 
	 					border-color:#ccc; 
	 					color:#000;
	 					strong{
	 						color:#000;
	 					}
	 					&:hover{
	 						background:#fff;
	 					}
	 				}
	 				&:hover{ 
	 					background-color:#FaFaFa;
	 					text-decoration:none;
	 				}
	 				.icon16{ 
	 						margin-right:8px; 
	 						color:#fff; 
	 						line-height:16px;
	 					}   
				    }
 				} 
			} 
		}

		/*加载条
	----------------------------------------------------*/

		.loading_bar{ 
					background:#eee; height:10px;
					position:relative; z-index:1;
			.num{
				color:#666; 
				text-shadow:0 0 2px #fff;  
				height:10px;   
				text-align:center; 
				position:absolute; z-index:2; width:100%; text-align:center;left:0; top:0;
				font:10px/10px Verdana, Geneva, sans-serif; overflow:hidden; white-space:nowrap;
			}
			.progress_bar{ 
				position:absolute; left:0; top:0; 
				z-index:1; color:#fff; 
				background:#2f549f; 
				height:10px; width:1px;  
				text-align:center; font:10px/10px Verdana, Geneva, sans-serif;white-space:nowrap;
				&.stripes{
					-webkit-background-size: 30px 30px;
                    -moz-background-size: 30px 30px;
            		background-size: 30px 30px;			
					background-image: -webkit-gradient(linear, left top, right bottom,
								      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
									  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
								      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
								      to(transparent));
            		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                      transparent 75%, transparent);
            		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                      transparent 75%, transparent);
            		background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                      transparent 75%, transparent);
            		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                      transparent 75%, transparent);
            		background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                      transparent 75%, transparent);            
                    -webkit-animation: animate-stripes 3s linear infinite;
                    -moz-animation: animate-stripes 3s linear infinite;     
				}
				&.shine{
					position: relative;
					&:after {
						content: '';
						opacity: 0;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background: #fff;	
			            -webkit-animation: animate-shine 2s ease-out infinite;
                        -moz-animation: animate-shine 2s ease-out infinite; 			
					}
					&:before{
						content: '';
						position: absolute;
						right:-5px;
						top:0;
						width:10px;
						height:100%;
						border-radius:5px;
						box-shadow:0 0 3px #2f549f;
						background: #fff;	
					}
				}
				&.glow{
                    -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
			        -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
					box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
			        -webkit-animation: animate-glow 1s ease-out infinite;
                    -moz-animation: animate-glow 1s ease-out infinite; 			
		        }
			}
     	}
		
        
        @-webkit-keyframes animate-stripes { 
			0% {background-position: 0 0;} 100% {background-position: 60px 0;}
        }
        
        
        @-moz-keyframes animate-stripes {
			0% {background-position: 0 0;} 100% {background-position: 60px 0;}
        }
	
        @-webkit-keyframes animate-shine { 
			0% {opacity: 0; width: 0;}
			50% {opacity: .5;}
			100% {opacity: 0; width: 100%;}
        }
        @-moz-keyframes animate-shine {
			0% {opacity: 0; width: 0;}
			50% {opacity: .5;}
			100% {opacity: 0; width: 100%;}
        }
		
		@-webkit-keyframes animate-glow {
		 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
		 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
		 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
		 }

		@-moz-keyframes animate-glow {
		 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
		 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
		 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
		}
		 
/* html5loading */
progress{border-radius: 2px;background: #eee; width:100%;}
progress::-webkit-progress-bar,
progress::-moz-progress-bar {background: #d7d7d7;}
progress::-webkit-progress-value,
progress::-moz-progress-value {background: #aadd6a;}

/* 图标-----------------------------------------------------------------*/
	

	.icon (@size ,@type , @bg){
		width:@size; 
		height:@size;
		display:inline-block;
		overflow:hidden; 
		vertical-align:middle; 
		font-size:12px; 
		line-height:@size;
		text-indent:-999em;
		background-image:@bg; 
		background-repeat:no-repeat; 
		&.four-case{
			background-position:-@type*@size -@size*0; 
		}
		&.nine-case{
			background-position:-@type*@size -@size*1; 
		}
		&.nine-case-two{
			background-position:-@type*@size -@size*2;
		}
		&.air-signal{
			background-position:-@type*@size -@size*3;
		}
		&.align-center{
			background-position:-@type*@size -@size*4; 
		}
		&.align-just{
			background-position:-@type*@size -@size*5; 
		}
		&.align-left{
			background-position:-@type*@size -@size*6; 
		}
		&.align-right{
			background-position:-@type*@size -@size*7; 
		}
		&.app-window{
			background-position:-@type*@size -@size*8; 
		}
		&.arrow-bottom{
			background-position:-@type*@size -@size*9; 
		}
		&.arrow-bottom-left{
			background-position:-@type*@size -@size*10; 
		}
		&.arrow-bottom-rigth{
			background-position:-@type*@size -@size*11; 
		}
		&.arrow-l{
			background-position:-@type*@size -@size*12;	
		}
		&.arrow-left{
			background-position:-@type*@size -@size*13; 
		}
		&.arrow-r{
			background-position:-@type*@size -@size*14; 
		}
		&.arrow-right{
			background-position:-@type*@size -@size*15 
		}
		&.arrow-top{
			background-position:-@type*@size -@size*16; 
		}
		&.arrow-top-left{
			background-position:-@type*@size -@size*17; 
		}
		&.arrow-top-right{
			background-position:-@type*@size -@size*18; 
		}
		&.arrow-two-head{
			background-position:-@type*@size -@size*19; 
		}
		&.arrow-two-head-2{
			background-position:-@type*@size -@size*20; 
		}
		&.attention{
			background-position:-@type*@size -@size*21; 
		}
		&.battery{
			background-position:-@type*@size -@size*22; 
		}
		&.book{
			background-position:-@type*@size -@size*23; 
		}
		&.bell{
			background-position:-@type*@size -@size*24; 
		}
		&.bookmark-1{
			background-position:-@type*@size -@size*25; 
		}
		&.bookmark-2{
			background-position:-@type*@size -@size*26; 
		}
		&.boxs{
			background-position:-@type*@size -@size*27; 
		}
		&.br-down{
			background-position:-@type*@size -@size*28; 
		}
		&.br-next{
			background-position:-@type*@size -@size*29; 
		}
		&.br-prev{
			background-position:-@type*@size -@size*30; 
		}
		&.br-up{
			background-position:-@type*@size -@size*31; 
		}
		&.brackets{
			background-position:-@type*@size -@size*32; 
		}
		&.browser{
			background-position:-@type*@size -@size*33; 
		}
		&.brush{
			background-position:-@type*@size -@size*34; 
		}
		&.bug{
			background-position:-@type*@size -@size*35; 
		}
		&.burst{
			background-position:-@type*@size -@size*36; 
		}
		&.calc{
			background-position:-@type*@size -@size*37; 
		}
		&.calendar-1{
			background-position:-@type*@size -@size*38; 
		}
		&.calendar-2{
			background-position:-@type*@size -@size*39; 
		}
		&.cancel{
			background-position:-@type*@size -@size*40; 
		}
		&.case{
			background-position:-@type*@size -@size*41; 
		}
		&.cc{
			background-position:-@type*@size -@size*42; 
		}
		&.cert{
			background-position:-@type*@size -@size*43; 
		}
		&.chart-bar{
			background-position:-@type*@size -@size*44; 
		}
		&.chart-line{
			background-position:-@type*@size -@size*45; 
		}
		&.chart-line2{
			background-position:-@type*@size -@size*46; 
		}
		&.chart-pie{
			background-position:-@type*@size -@size*47; 
		}
		&.checkbox-checked{
			background-position:-@type*@size -@size*48; 
		}
		&.checkbox-unchecked{
			background-position:-@type*@size -@size*49; 
		}
		&.checkmark{
			background-position:-@type*@size -@size*50; 
		}
		&.clip{
			background-position:-@type*@size -@size*51; 
		}
		&.clipboard-copy{
			background-position:-@type*@size -@size*52; 
		}
		&.clipboard-cut{
			background-position:-@type*@size -@size*53; 
		}
		&.clipboard-past{
			background-position:-@type*@size -@size*54; 
		}
		&.clock{
			background-position:-@type*@size -@size*55; 
		}
		&.contact-card{
			background-position:-@type*@size -@size*56; 
		}
		&.cloud{
			background-position:-@type*@size -@size*57; 
		}
		&.cloud-rain{
			background-position:-@type*@size -@size*58; 
		}
		&.cog{
			background-position:-@type*@size -@size*59; 
		}
		&.comp{
			background-position:-@type*@size -@size*60; 
		}
		&.compass{
			background-position:-@type*@size -@size*61; 
		}
		&.cube{
			background-position:-@type*@size -@size*62; 
		}
		&.cur-bp{
			background-position:-@type*@size -@size*63; 
		}
		&.cur-dollar{
			background-position:-@type*@size -@size*64;
		}
		&.cur-euro{
			background-position:-@type*@size -@size*65; 
		}
		&.cur-yen{
			background-position:-@type*@size -@size*66; 
		}
		&.cursor-arrow{
			background-position:-@type*@size -@size*67; 
		}
		&.cursor-drag-arrow{
			background-position:-@type*@size -@size*68; 
		}
		&.cursor-drag-arrow-2{
			background-position:-@type*@size -@size*69; 
		}
		&.cursor-drag-hand{
			background-position:-@type*@size -@size*70; 
		}
		&.cursor-H-split{
			background-position:-@type*@size -@size*71; 
		}
		&.cursor-hand{
			background-position:-@type*@size -@size*72; 
		}
		&.cursor-V-split{
			background-position:-@type*@size -@size*73; 
		}
		&.db{
			background-position:-@type*@size -@size*74; 
		}
		&.delete{
			background-position:-@type*@size -@size*75; 
		}
		&.doc-delete{
			background-position:-@type*@size -@size*76; 
		}
		&.doc-edit{
			background-position:-@type*@size -@size*77; 
		}
		&.doc-empty{
			background-position:-@type*@size -@size*78; 
		}
		&.doc-export{
			background-position:-@type*@size -@size*79; 
		}
		&.doc-import{
			background-position:-@type*@size -@size*80; 
		}
		&.doc-lines{
			background-position:-@type*@size -@size*81; 
		}
		&.doc-lines-stright{
			background-position:-@type*@size -@size*82; 
		}
		&.doc-minus{
			background-position:-@type*@size -@size*83; 
		}
		&.doc-new{
			background-position:-@type*@size -@size*84; 
		}
		&.doc-plus{
			background-position:-@type*@size -@size*85; 
		}
		&.document{
			background-position:-@type*@size -@size*86; 
		}
		&.download{
			background-position:-@type*@size -@size*87; 
		}
		&.emotion-sad{
			background-position:-@type*@size -@size*88; 
		}
		&.emotion-smile{
			background-position:-@type*@size -@size*89; 
		}
		&.expand{
			background-position:-@type*@size -@size*90; 
		}
		&.eye{
			background-position:-@type*@size -@size*91; 
		}
		&.eye-inv{
			background-position:-@type*@size -@size*92; 
		}
		&.facebook{
			background-position:-@type*@size -@size*93; 
		}
		&.filter{
			background-position:-@type*@size -@size*94; 
		}
		&.fire{
			background-position:-@type*@size -@size*95; 
		}
		&.flag{
			background-position:-@type*@size -@size*96; 
		}
		&.folder{
			background-position:-@type*@size -@size*97; 
		}
		&.folder-arrow{
			background-position:-@type*@size -@size*98; 
		}
		&.folder-delete{
			background-position:-@type*@size -@size*99; 
		}
		&.folder-minus{
			background-position:-@type*@size -@size*100; 
		}
		&.folder-open{
			background-position:-@type*@size -@size*101; 
		}
		&.folder-plus{
			background-position:-@type*@size -@size*102; 
		}
		&.font-bold{
			background-position:-@type*@size -@size*103; 
		}
		&.font-italic{
			background-position:-@type*@size -@size*104; 
		}
		&.font-size{
			background-position:-@type*@size -@size*105; 
		}
		&.font-strokethrough{
			background-position:-@type*@size -@size*106; 
		}
		&.font-underline{
			background-position:-@type*@size -@size*107; 
		}
		&.game-pad{
			background-position:-@type*@size -@size*108; 
		}
		&.globe-1{
			background-position:-@type*@size -@size*109; 
		}
		&.globe-2{
			background-position:-@type*@size -@size*110; 
		}
		&.globe-3{
			background-position:-@type*@size -@size*111; 
		}
		&.google{
			background-position:-@type*@size -@size*112; 
		}
		&.hand-1{
			background-position:-@type*@size -@size*113; 
		}
		&.hand-2{
			background-position:-@type*@size -@size*114; 
		}
		&.hand-contra{
			background-position:-@type*@size -@size*115; 
		}
		&.hand-pro{
			background-position:-@type*@size -@size*116; 
		}
		&.headphones{
			background-position:-@type*@size -@size*117; 
		}
		&.heart{
			background-position:-@type*@size -@size*118; 
		}
		&.heart-empty{
			background-position:-@type*@size -@size*119; 
		}
		&.home{
			background-position:-@type*@size -@size*120; 
		}
		&.image-text{
			background-position:-@type*@size -@size*121; 
		}
		&.inbox{
			background-position:-@type*@size -@size*122; 
		}
		&.indent-decrease{
			background-position:-@type*@size -@size*123; 
		}
		&.indent-increase{
			background-position:-@type*@size -@size*124; 
		}
		&.info{
			background-position:-@type*@size -@size*125; 
		}
		&.iphone{
			background-position:-@type*@size -@size*126; 
		}
		&.key{
			background-position:-@type*@size -@size*127; 
		}
		&.layers-1{
			background-position:-@type*@size -@size*128; 
		}
		&.layers-2{
			background-position:-@type*@size -@size*129; 
		}
		&.lightbulb{
			background-position:-@type*@size -@size*130; 
		}
		&.lighting{
			background-position:-@type*@size -@size*131; 
		}
		&.link{
			background-position:-@type*@size -@size*132; 
		}
		&.list-bullets{
			background-position:-@type*@size -@size*133; 
		}
		&.list-num{
			background-position:-@type*@size -@size*134; 
		}
		&.magic-wand{
			background-position:-@type*@size -@size*135; 
		}
		&.mail{
			background-position:-@type*@size -@size*136; 
		}
		&.mail-2{
			background-position:-@type*@size -@size*137; 
		}
		&.mic{
			background-position:-@type*@size -@size*138; 
		}
		&.monitor{
			background-position:-@type*@size -@size*139; 
		}
		&.movie{
			background-position:-@type*@size -@size*140; 
		}
		&.music{
			background-position:-@type*@size -@size*141; 
		}
		&.net-comp{
			background-position:-@type*@size -@size*142; 
		}
		&.network{
			background-position:-@type*@size -@size*143; 
		}
		&.notepad{
			background-position:-@type*@size -@size*144; 
		}
		&.notepad-2{
			background-position:-@type*@size -@size*145; 
		}
		&.on-off{
			background-position:-@type*@size -@size*146; 
		}
		&.openid{
			background-position:-@type*@size -@size*147; 
		}
		&.padlock-closed{
			background-position:-@type*@size -@size*148; 
		}
		&.padlock-open{
			background-position:-@type*@size -@size*149; 
		}
		&.page-layout{
			background-position:-@type*@size -@size*150; 
		}
		&.paragraph{
			background-position:-@type*@size -@size*151; 
		}
		&.pencil{
			background-position:-@type*@size -@size*152; 
		}
		&.phone{
			background-position:-@type*@size -@size*153; 
		}
		&.phone-1{
			background-position:-@type*@size -@size*154; 
		}
		&.phone-2{
			background-position:-@type*@size -@size*155; 
		}
		&.left-arrow{
			background-position:-@type*@size -@size*156; 
		}
		&.photo{
			background-position:-@type*@size -@size*157; 
		}
		&.picture{
			background-position:-@type*@size -@size*158; 
		}
		&.pin{
			background-position:-@type*@size -@size*159; 
		}
		&.pin-2{
			background-position:-@type*@size -@size*160; 
		}
		&.pin-map{
			background-position:-@type*@size -@size*161; 
		}
		&.pin-map-down{
			background-position:-@type*@size -@size*162; 
		}
		&.pin-map-left{
			background-position:-@type*@size -@size*163; 
		}
		&.pin-map-right{
			background-position:-@type*@size -@size*164; 
		}
		&.pin-map-top{
			background-position:-@type*@size -@size*165; 
		}
		&.pin-sq-down{
			background-position:-@type*@size -@size*166; 
		}
		&.pin-sq-left{
			background-position:-@type*@size -@size*167; 
		}
		&.pin-sq-right{
			background-position:-@type*@size -@size*168; 
		}
		&.pin-sq-top{
			background-position:-@type*@size -@size*169; 
		}
		&.playback-ff{
			background-position:-@type*@size -@size*170; 
		}
		&.playback-next{
			background-position:-@type*@size -@size*171; 
		}
		&.playback-pause{
			background-position:-@type*@size -@size*172; 
		}
		&.playback-play{
			background-position:-@type*@size -@size*173; 
		}
		&.playback-prev{
			background-position:-@type*@size -@size*174; 
		}
		&.playback-rec{
			background-position:-@type*@size -@size*175; 
		}
		&.playback-reload{
			background-position:-@type*@size -@size*176; 
		}
		&.playback-rew{
			background-position:-@type*@size -@size*177; 
		}
		&.playback-stop{
			background-position:-@type*@size -@size*178; 
		}
		&.preso{
			background-position:-@type*@size -@size*179; 
		}
		&.print{
			background-position:-@type*@size -@size*180; 
		}
		&.redo{
			background-position:-@type*@size -@size*181; 
		}
		&.rnd-br-down{
			background-position:-@type*@size -@size*182; 
		}
		&.rnd-br-first{
			background-position:-@type*@size -@size*193; 
		}
		&.rnd-br-last{
			background-position:-@type*@size -@size*184; 
		}
		&.rnd-br-next{
			background-position:-@type*@size -@size*185; 
		}
		&.rnd-br-prev{
			background-position:-@type*@size -@size*186; 
		}
		&.rnd-br-up{
			background-position:-@type*@size -@size*187; 
		}
		&.round{
			background-position:-@type*@size -@size*188; 
		}
		&.round-and-up{
			background-position:-@type*@size -@size*189; 
		}
		&.round-arrow-left{
			background-position:-@type*@size -@size*190; 
		}
		&.round-arrow-right{
			background-position:-@type*@size -@size*191; 
		}
		&.round-checkmark{
			background-position:-@type*@size -@size*192; 
		}
		&.round-delete{
			background-position:-@type*@size -@size*193; 
		}
		&.round-minus{
			background-position:-@type*@size -@size*194; 
		}
		&.round-plus{
			background-position:-@type*@size -@size*195; 
		}
		&.rss{
			background-position:-@type*@size -@size*196; 
		}
		&.rss-sq{
			background-position:-@type*@size -@size*197; 
		}
		&.sand{
			background-position:-@type*@size -@size*198; 
		}
		&.sat-dish{
			background-position:-@type*@size -@size*199; 
		}
		&.save{
			background-position:-@type*@size -@size*200; 
		}
		&.server{
			background-position:-@type*@size -@size*201; 
		}
		&.share{
			background-position:-@type*@size -@size*202; 
		}
		&.shop-cart{
			background-position:-@type*@size -@size*203; 
		}
		&.sound-high{
			background-position:-@type*@size -@size*204; 
		}
		&.sound-low{
			background-position:-@type*@size -@size*205; 
		}
		&.sound-mute{
			background-position:-@type*@size -@size*206; 
		}
		&.spechbubble{
			background-position:-@type*@size -@size*207; 
		}
		&.spechbubble-2{
			background-position:-@type*@size -@size*208; 
		}
		&.spechbubble-sq{
			background-position:-@type*@size -@size*209; 
		}
		&.spechbubble-sq-line{
			background-position:-@type*@size -@size*210; 
		}
		&.sq-br-down{
			background-position:-@type*@size -@size*211; 
		}
		&.sq-br-first{
			background-position:-@type*@size -@size*212; 
		}
		&.sq-br-last{
			background-position:-@type*@size -@size*213; 
		}
		&.sq-br-next{
			background-position:-@type*@size -@size*214; 
		}
		&.sq-br-prevshare{
			background-position:-@type*@size -@size*215; 
		}
		&.sq-br-up{
			background-position:-@type*@size -@size*216; 
		}
		&.sq-down{
			background-position:-@type*@size -@size*217; 
		}
		&.sq-minus{
			background-position:-@type*@size -@size*218; 
		}
		&.sq-next{
			background-position:-@type*@size -@size*219; 
		}
		&.sq-plus{
			background-position:-@type*@size -@size*220; 
		}
		&.sq-prev{
			background-position:-@type*@size -@size*221; 
		}
		&.sq-up{
			background-position:-@type*@size -@size*222; 
		}
		&.square-shape{
			background-position:-@type*@size -@size*223; 
		}
		&.star{
			background-position:-@type*@size -@size*224; 
		}
		&.star-fav{
			background-position:-@type*@size -@size*225; 
		}
		&.star-fav-empty{
			background-position:-@type*@size -@size*226; 
		}
		&.sun{
			background-position:-@type*@size -@size*227; 
		}
		&.tag{
			background-position:-@type*@size -@size*228; 
		}
		&.tape{
			background-position:-@type*@size -@size*229; 
		}
		&.target{
			background-position:-@type*@size -@size*230; 
		}
		&.text-curstor{
			background-position:-@type*@size -@size*231; 
		}
		&.text-letter-t{
			background-position:-@type*@size -@size*232; 
		}
		&.top-right-expand{
			background-position:-@type*@size -@size*233; 
		}
		&.trash{
			background-position:-@type*@size -@size*234; 
		}
		&.twitter{
			background-position:-@type*@size -@size*235; 
		}
		&.twitter-2{
			background-position:-@type*@size -@size*236; 
		}
		&.undo{
			background-position:-@type*@size -@size*237; 
		}
		&.user{
			background-position:-@type*@size -@size*238; 
		}
		&.users{
			background-position:-@type*@size -@size*239; 
		}
		&.wrench{
			background-position:-@type*@size -@size*240; 
		}
		&.wrench-plus{
			background-position:-@type*@size -@size*241; 
		}
		&.wrench-plus-2{
			background-position:-@type*@size -@size*242; 
		}
		&.zoom{
			background-position:-@type*@size -@size*243; 
		}
		&.meter{
			background-position:-@type*@size -@size*244; 
		}
		&.buyer{
			background-position:-@type*@size -@size*245; 
		}
		&.seller{
			background-position:-@type*@size -@size*246; 
		}
		&.shield{
			background-position:-@type*@size -@size*247; 
		}
		&.help{
			background-position:-@type*@size -@size*248; 
		}
	}

	.reverse.icon48{ 
		.icon(48px,1,url(../img/icon48.png));
	}

	.icon48{ 
		.icon(48px,0,url(../img/icon48.png));
	}

	.reverse.icon32{ 
		.icon(32px,1,url(../img/icon32.png));
	}

	.icon32{ 
		.icon(32px,0,url(../img/icon32.png));
	}

	.reverse.icon16{
		.icon(16px,1,url(../img/icon16.png));
	}
	.icon16{
		.icon(16px,0,url(../img/icon16.png));
	}


/* dl 列表  */ 
.list{ 
	border:4px solid #eaeaea;/*min-height:580px;_height: expression( this.scrollHeight < 580 ? "580px" : "auto" );*/
	dt{ text-align:center; font-weight:bold; background:#DDE8F6; color:#2F549F; line-height:30px;border:1px solid #ccc;border-top:1px solid #fff;}
	dd{
		clear:both; padding:10px;/* height:25px;*/border-top:1px solid #fff; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc;-o-transition: all 0.2s ease-out 0.1s; -webkit-transition: all 0.2s ease-out 0.1s; -moz-transition: all 0.2s ease-out 0.1s; -ms-transition: all 0.2s ease-out 0.1s; transition: all 0.2s ease-out 0.1s; 

		&.tags{ 
			height:25px; padding:0 10px; background:#2F549F; color:#fff;border-bottom:1px solid #fff;
			a{ 
				display:block; color:#fff;background:#3C69C5; margin:0 1px; 
				&:hover{ color:#2F549F; background:#B3C3E8; }
			}
			li{ display:inline; float:left; width:10%;}
			&:hover{background:#2F549F;}
		}

		&.odd{ background:#f2f2f2;}
		&.hover,&:hover{ background:#fffeb5;}

		li{ 
			display:inline; float:left; width:10%; text-align:center;
			&.w1{ width:10%; overflow:hidden;}
			&.w2{ width:20%; overflow:hidden;}
			&.w3{ width:30%; overflow:hidden;}
			&.w4{ width:40%; overflow:hidden;}
			&.w5{ width:50%; overflow:hidden;}
			&.w6{ width:60%; overflow:hidden;}
			&.w7{ width:70%; overflow:hidden;}
			&.w8{ width:80%; overflow:hidden;}
			&.w9{ width:90%; overflow:hidden;}
			&.w0{ width:100%; overflow:hidden;}
		}

	}
}

	
	


/*  table 列表 */
.data_list{
	border:4px solid #eaeaea;
	.data_table{ 
		width:100%;border:1px solid #ccc;
		
		caption{ background:#ccc; font:14px/30px Arial, Helvetica, sans-serif; text-align:center; color:#fff;}
		thead{ 
			background:#2f549f; color:#fff;
			th{ padding:0 10px;}
			tr{
				&.hover,&:hover{ background:#2f549f;}
			}
		}
		tfoot{ 
			background:#eafaea; color:#393;
			td{ padding:0 10px;}
			tr{
				&.hover,&:hover{ background:#eafaea;}
			}
		}
		tbody{ 
			background:#f8f8f8; color:#333;
			tr{
			&.odd{ background:#f2f2f2;}
			&.hover,&:hover{ background:#fffeb5;}
		}
			td{ padding:10px; padding-right:0px; border-top:1px solid #fff; border-bottom:1px solid #ccc;}

		}
	}
}

/* 标签 */
.tags{
	.border-radius(5px);
	.box-sizing();
	display: inline-block;
	padding-left:5px;
	background: #efefef;
	vertical-align: middle;
	white-space: nowrap;
	border: 1px solid #eaeaea;
	cursor: default;
	
	a{
		 font-size:11px;
		 font-weight: bold;
		 display: inline-block;
		 padding:0 5px;
	}
	&:hover{
		background: darken(#efefef,5%);
		border-color:darken(#eaeaea,10%);
	}
}
	